<template>
  <div id="navs">
    <!-- :gutter="20" 代表栅格间间隙20px -->
    <el-row :gutter="50">
      <div class="navs_left fl">
        <h1 @click="$router.push('/index/map')"><img src="../assets/images/logo.png" alt="找不到图片"></h1>
      </div>
      <div class="navs_mid fl">
        <el-menu theme="light" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1" @click="$router.push('/index/map')">
            <!-- <router-link to=''> -->
            站点地图
            <!-- </router-link> -->
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">数据报表</template>
            <el-menu-item index="2-1" @click="$router.push('/index/data1')">
              <!-- <router-link to='/data1'> -->
              开门记录
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="2-2" @click="$router.push('/index/data2')">
              <!-- <router-link to='/data2'> -->
              告警记录
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="2-3" @click="$router.push('/index/data3')">
              <!-- <router-link to='/data3'> -->
              开门统计
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="2-4" @click="$router.push('/index/data4')">
              <!-- <router-link to='/data4'> -->
              门锁统计
              <!-- </router-link> -->
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="3" @click="$router.push('/index/powmanage')">
            <!-- <router-link to='/powmanage'> -->
            授权管理
            <!-- </router-link> -->
          </el-menu-item>
          <el-menu-item index="4" @click="$router.push('/index/toolmanage')">
            <!-- <router-link to='/toolmanage'> -->
            锁具管理
            <!-- </router-link> -->
          </el-menu-item>
          <el-submenu index="5">
            <template slot="title">钥匙管理</template>
            <el-menu-item index="5-1" @click="$router.push('/index/localmanage1')">
              <!-- <router-link to='/localmanage1'> -->
              电子钥匙管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="5-2" @click="$router.push('/index/localmanage2')">
              <!-- <router-link to='/localmanage2'> -->
              机械钥匙管理
              <!-- </router-link> -->
            </el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">系统管理</template>
            <el-menu-item index="6-1" @click="$router.push('/index/sysmanage1')">
              <!-- <router-link to='/sysmanage1'> -->
              区域管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-2" @click="$router.push('/index/sysmanage2')">
              <!-- <router-link to='/sysmanage2'> -->
              机构管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-3" @click="$router.push('/index/sysmanage3')">
              <!-- <router-link to='/sysmanage3'> -->
              角色管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-4" @click="$router.push('/index/sysmanage4')">
              <!-- <router-link to='/sysmanage4'> -->
              用户管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-5" @click="$router.push('/index/sysmanage5')">
              <!-- <router-link to='/sysmanage5'> -->
              站点管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-6" @click="$router.push('/index/sysmanage6')">
              <!-- <router-link to='/sysmanage6'> -->
              设施管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-7" @click="$router.push('/index/sysmanage7')">
              <!-- <router-link to='/sysmanage7'> -->
              设备厂商管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-8" @click="$router.push('/index/sysmanage8')">
              <!-- <router-link to='/sysmanage8'> -->
              设备类型管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-9" @click="$router.push('/index/sysmanage9')">
              <!-- <router-link to='/sysmanage9'> -->
              公告管理
              <!-- </router-link> -->
            </el-menu-item>
            <el-menu-item index="6-10" @click="$router.push('/index/sysmanage10')">
              <!-- <router-link to='/sysmanage10'> -->
              日志查询
              <!-- </router-link> -->
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <div class="grid-content bg-purple navs_right fr">
        <i class="el-icon-date"></i>
        <span class="gg" @click="openBroadcast">公告</span>
        <i class="el-icon-star-off"></i>
        <span class="gk" @click="openDetail">概况</span>
        <span>用户名 :</span>
        <span>{{user}}</span>
        <span @click="loginout" class="loginOut">退出</span>

        <!-- 弹出层开始 -->
        <div class="new-notice outWindow">
          <span class="close" @click="close"> x </span>
          <table border="1">
            <caption>系统公告</caption>
            <thead>
              <tr>
                <th>公告主题</th>
                <th>公告内容</th>
                <th>发布时间</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>data1</td>
                <td>data2data2data2data2data2data2data2</td>
                <td>data3</td>
              </tr>
              <tr>
                <td>data1</td>
                <td>data2data2data2data2data2data2data2</td>
                <td>data3</td>
              </tr>
              <tr>
                <td>data1</td>
                <td>data2data2data2data2data2data2data2</td>
                <td>data3</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="new-points outWindow">
          <span class="close" @click="close"> x </span>
          <div class="new-points-main">
            <h3>系统概况</h3>
            <div>站点<br>3000个</div>
            <div>门锁<br>2000个</div>
            <div>电子钥匙<br>100个</div>
            <div>机械钥匙<br>1000把</div>
            <div>用户<br>200个</div>
          </div>
        </div>
        <!-- 弹出层结束 -->
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      user: window.localStorage.getItem('username')
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    openBroadcast() {
      $(".new-points").hide();
      $(".new-notice").slideDown()
    },
    openDetail() {
      $(".new-notice").hide()
      $(".new-points").slideDown();

    },
    close() {
      $(".new-notice").slideUp();
      $(".new-points").slideUp();
    },
    loginout() {
      if (confirm("您确定要退出吗？")) {
        this.$router.push({ path: '/login' });
        window.localStorage.setItem('username', '')
      } else {
        return
      }
    }
  }
}
</script>


<style scoped>
#navs {
  height: 60px;
  width: 100%;
}

#navs_logo {
  text-align: center;
}

.fl {
  float: left;
}

;
.fr {
  float: right;
}

.loginOut {
  cursor: pointer;
}




/* -------------------------------头部左边----------------------------------- */

#navs h1 img {
  height: 50px;
  cursor: pointer;
}

.navs_left {
  width: 300px;
  text-align: center;
}




/* ---------------------------------头部中间-------------------------------- */


/* ---------------------------------头部右边-------------------------------- */

.outWindow {
  position: fixed;
  right: 30px;
  top: 60px;
  border: 3px solid #0088CC;
  width: 600px;
  display: none;
  padding: 20px 0;
  z-index: 999;
  background: white;
  border-radius: 10px;
}

.outWindow .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin: 10px;
  text-align: center;
  background: #ccc;
  color: #0088CC;
  cursor: pointer;
}

.cur {
  color: red
}

.outWindow table,
.new-points-main {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  margin-top: 35px;
  margin-bottom: 50px;
}

.outWindow table>caption {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}

.new-points-main>div {
  display: inline-block;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 12px;
  margin-top: 20px;
  margin-left: 10px;
}

.navs_right {
  text-align: center;
  line-height: 60px;
  margin-right: 50px;
  /* background-color: red; */
}

.navs_right>span {
  margin-right: 10px;
}

.gg,
.gk {
  cursor: pointer;
}
</style>


